<template>
  <div class="commend">
    <div class="backgroundLogo">
      <img :src="item.bigImg" alt="" />
    </div>
    <div class="baImg" v-if="item.bcImg">
      <img :src="item.bcImg" alt="" />
    </div>
    <div class="cont">
      <div class="wraBox">
        <div class="top" v-if="item.value1">
          <div class="item" v-for="(v1,v1ind) in item.value1" :key="v1ind">
            <div class="text">
              <p>{{ v1.line1 }}</p>
              <p>{{ v1.line2 }}</p>
              <span v-if="v1.hot">HOT</span>
            </div>
            <img :src="v1.proImg" />
          </div>
        </div>
        <div class="center" v-if="item.value2">
          <div class="item" v-for="(v2,v2ind) in item.value2" :key="v2ind">
            <div class="text">
              <p>{{ v2.line1 }}</p>
              <p>{{ v2.line2 }}</p>
            </div>
            <img :src="v2.proImg" alt="" />
          </div>
        </div>
        <div class="bottom" v-if="item.value3">
          <div class="item" v-for="(v3,v3ind) in item.value3" :key="v3ind">
            <div class="text">
              <p>{{ v3.line1 }}</p>
              <p>{{ v3.line2 }}</p>
            </div>
            <img :src="v3.proImg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="less" scoped>
.commend {
  width: 100%;

  .backgroundLogo {
    img {
      width: 100%;
    }
  }
  .baImg {
    width: 100%;
    padding: 0px 12px;
    box-sizing: border-box;
    img {
      width: 100%;
      border-radius: 10px 10px 0px 0px;
    }
  }
  .cont {
    padding: 0px 12px;
    border-radius: 10px;
    .wraBox{
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      .top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
        img {
          width: 100%;
          border-radius: 10px 10px 0px 0px;
        }
        .item {
          width: 49.9%;
          height: 119px;
          background-color: #efe5f7;
          display: flex;
          justify-content: space-between;
          overflow: hidden;
          img {
            margin-top: 44px;
            width: 95px;
            height: 75px;
            vertical-align: middle;
          }
          .text {
            margin: 20px 0px 0px 10px;
            p {
              font-size: 14px;
              &:nth-child(2) {
                font-size: 12px;
                color: #999999;
              }
            }
            span {
              margin-top: 9px;
              display: inline-block;
              font-size: 12px;
              padding: 0px 3px;
              border: 1px solid #999999;
              border-radius: 10px;
              color: #999999;
              box-sizing: border-box;
            }
          }
        }
      }
      .center {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 1px;
        .item {
          display: flex;
          width: 49.9%;
          height: 80px;
          justify-content: space-between;
          align-items: center;
          background-color: #fff;
          .text {
            padding-left: 12px;
            p {
              font-size: 14px;
              color: rgb(75, 72, 72);
              &:nth-child(2) {
                font-size: 12px;
                color: #999999;
              }
            }
          }
          img {
            width: 76px;
            height: 76px;
          }
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border-radius: 0px 0px 10px 10px;
        overflow: hidden;
        .item {
          padding-top: 12px;
          width: 24.8%;
          height: 118px;
          background-color: #fff;
          box-sizing: border-box;
          .text {
            font-size: 14px;
            p {
              text-align: center;
              &:nth-child(2) {
                font-size: 12px;
                color: #999999;
              }
            }
          }
          img {
            margin: 7px auto;
            width: 63px;
          }
        }
      }
    }
  }
}
</style>